<template>
  <div>
    <span>查询</span>
    <el-input type="text" maxlength="20" placeholder="key" style="width:200px" v-model="findKey"
              :rules="{required: true, message: 'key不能为空', trigger: 'change'}"></el-input>
    <el-button type="primary" @click="find" size="small"> 查询</el-button>
    {{ result }}
    <el-divider/>
    <span>新增</span>
    <el-input type="text" maxlength="20" placeholder="key" style="width:200px" v-model="key"
              :rules="{required: true, message: 'key不能为空', trigger: 'change'}"></el-input>
    <el-input type="text" maxlength="20" placeholder="value" style="width:200px" v-model="value"
              :rules="{required: true, message: 'value不能为空', trigger: 'change'}"></el-input>
    <el-button type="primary" @click="add" size="small">提交</el-button>
    <el-divider/>
    <span>设置有效期</span>
    <el-button type="primary" @click="set" size="small">设置</el-button>
  </div>
</template>

<script>
export default {
  name: "cookies",
  data() {
    return {
      cookies: undefined,
      key: undefined,
      value: undefined,
      findKey: undefined,
      result: undefined,
    }
  },
  created() {
    this.cookies = this.$cookie.get('name')
  },
  methods: {
    // 新增
    add() {
      if (this.key && this.value) {
        this.$cookie.set(this.key, this.value)
        this.key = undefined
        this.value = undefined
        this.$message.success('存储成功')
      } else {
        this.$message.error('不能为空')
      }
    },
    // 查询
    find() {
      if (this.findKey) {
        let result = this.$cookie.get(this.findKey)
        console.log(result)
        if (result) {
          this.result = result
        } else {
          this.result = '查无结果'
        }
      } else {
        this.$message.error('不能为空')
      }
    },
    // 设置有效期
    set() {
      this.$cookie.set('a', '130', {expires: 10})
    },
    // 删除
    del(){

    }
  }
}
</script>

<style scoped>
.el-input {
  margin: 10px;
}

.el-button {
  margin: 10px;
}
</style>
